<template>
	<view :class="[origin !== 'live'?'list':'']">
		<swiper easing-function="default" :current="swiperCurrent" :display-multiple-items="1"
			:autoplay="false" :interval="3000" :circular="true">
			<block v-for="item in list" :key="item.id">
				<swiper-item class="swiper-item-item">
					<ItemSwiper :item="item"></ItemSwiper>
				</swiper-item>
			</block>
		</swiper>
		
		<!-- <view class="title" v-if="origin !== 'live'">
			<view>
				<image v-if="origin == 'hot'" class="new-img" src="@/static/index/fire.png" lazy-load></image>
				<image v-else class="new-img" src="@/static/index/recommend.png" lazy-load></image>
				{{name}}
			</view>
			<view class="right" @click="lookAll" >查看全部&gt;</view>
		</view> -->
		<!-- <view class="item-box">
			<view  @click="goIntroduction(item,index)" 
				   :class="['item',origin !== 'live'?'item-list':'item-live',
					list.length > 4 ? 'addMargin':'']" 
					v-for="(item,index) in list" 
					:key="item.id" 
					>
				<template >
					<view class="item-img">
						<image :src="item.cover_vertical" lazy-load></image>
					</view>
					<view class="item-name">
						{{item.name}}
					</view>
				</template>
				
			</view>
		</view> -->
		
	</view>
</template>

<script>
	export default {
		name: "newList",
		props: {
			list: {
				type: Array,
				default: () => []
			},
			origin:{
				type:String,
				default:'hot',
			},
			name:{
				type:String,
				default:'爆款推荐',
			}
		},
		
		computed: {
		    isMarginBottom() {
				  if ((this.origin !== 'live' && this.list.length > 4) || this.list.length > 3) {  
				      return 'addMargin';  
				  }
		    },
		  },
		
		methods: {
		
			goIntroduction(item) {
				uni.navigateTo({
					// url: `/pages/Detail/Detail?drama_id=${item.id}`
					url: `/pages/play/index?drama_id=1&episode_index=1&tt_album_id=7564728996806525466&tt_episode_id=7564732183739580947`
					// url: `/pages/play/index?tt_album_id=7564728996806525466&tt_episode_id=7564732183739580947`
					// url: `/pages/play/index?drama_id=1&episode_index=2`
				})
				  // if (tt.canIUse('PlayletExtension')) {
				  //      //跳转至绑定短剧的页面
				  //       tt.navigateTo({
				  //         url: `/pages/playlet/index?tt_album_id=7564728996806525466&tt_episode_id=7564732183739580947`,
				  //       });
				  //   } else {
				  //       // ... 跳转至开发者自有播放页 或提示用户升级抖音
				  //       tt.showToast('当前版本过低，请升级抖音')
				  //   }
			},
			lookAll(){
				uni.navigateTo({
					url: `/pages/recommend/recommend?origin=${this.origin}`
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	.list{
		border-radius: 28rpx;
		background: @read-primary;
		padding: 11rpx 9rpx;
		margin: 12rpx 0 16rpx 0;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		}
		.title{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// flex-direction: column;
			font-size: 36rpx;
			color: #202020;

			margin:	20rpx 0;
			.new-img{
				width: 25.58rpx;
				height: 31.32rpx;
				margin-right: 15rpx;
			}
			.right{
				font-size: 23rpx;
				color: #4f4f4f;
				font-weight: 400;
			}
		}
		.item-box{
			width: 100%;
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;
			.item{
				.item-img{
					border-radius: 8rpx;
					overflow: hidden;
					box-shadow: 4rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
					image{
						width: 100%;
						height: 100%;
					}
				}
				.item-name{
					color: #212121;
					font-size: 25rpx;
					line-height: 36rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}
				.item-text{
					color: #717171;
					font-size: 18rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
			}
			.item-list{
				width: calc((100% - 90rpx) / 4);
				margin-left: 30rpx;
				.item-img{
					height: 200rpx;
				}
				.item-name{
					color: #212121;
					font-size: 25rpx;
					line-height: 32rpx;
					margin-top:15rpx;
				}
				.item-text{
					color: #717171;
					font-size: 10rpx;
				}
			}
			.item-list:nth-child(4n+1) {
				margin-left: 0;
			}
			
			.item-live{
				width: calc((100% - 60rpx) / 3);
				margin-left: 30rpx;
				.item-img{
					height: 260rpx;
				}
				.item-name{
					color: #212121;
					font-size: 28rpx;
					line-height: 32rpx;
					margin-top:15rpx;
				}
				.item-text{
					color: #717171;
					font-size: 14rpx;
				}
			}
			.item-live:nth-child(3n+1) {
			 margin-left: 0;
			}
		}
	.addMargin{
		margin-bottom:30rpx;
	}
</style>